<template>
	<view class="">
		<u-navbar title="系统消息" :title-bold="true" title-color="#000" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>

		<view class="message-center-container">
			<navigator v-for="(item, index) in list" :key="index" class="message-item row" hover-class="none" :url="'/bundle/pages/notice/notice?type=' + item.noticeContent">
				<!-- <image style="width: 76rpx; height: 76rpx; flex: none" :src="item.img"></image> -->
				<view class="item-info ml20 column">
					<view class="item-title">{{ item.noticeTitle }}</view>
					<view class="item-desc line1 muted">{{ item.createTime }}</view>
				</view>
			</navigator>
		</view>

		<u-empty v-if="list.length == 0" icon-size="400" src="/static/main/image2x.png"></u-empty>
	</view>
</template>

<script>
// import { getNoticeLists, getMessageLists } from '@/api/store';
import main from '@/api/main.js';
export default {
	data() {
		return {
			list: []
		};
	},

	components: {},
	props: {},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		this.getMessageListsFun();
	},

	methods: {
		getMessageListsFun() {
			main.getNotice({}).then((res) => {
				this.list = res.rows;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.message-center-container {
	margin-top: 10rpx;
	padding: 0 20rpx;
	background-color: white;
	.message-item {
		padding: 32rpx 0;
		&:not(:last-of-type) {
			border-bottom: $-solid-border;
		}
		.item-info {
			font-size: 32rpx;
			flex: 1;
			overflow: hidden;
			.item-title {
				font-size: 32rpx;
			}
			.item-desc {
				font-size: 26rpx;
			}
		}
	}
}
</style>
